<template>
    <div v-transfer-dom
         :data-traget="transferDom"
         :data-transfer="transfer">
        <transition :name="transitionNames[1]">
            <div :class="maskClasses"
                 v-show="visible"
                 @click="mask"
                 :style="deepIndex"></div>
        </transition>
        <div :class="wrapClasses"
             @click="handleWrapClick"
             :style="deepIndex">
            <transition :name="transitionNames[0]"
                        @after-leave="animationFinish">
                <div :class="classes"
                     :style="mainStyles"
                     v-show="visible"
                     ref="body">
                    <div :class="[prefixCls + '-content']">
                        <a :class="[prefixCls + '-close']"
                           v-if="closable"
                           @click="close">
                            <slot name="close">
                                <Icon type="ios-close-empty"></Icon>
                            </slot>
                        </a>
                        <div :class="[prefixCls + '-header']"
                             v-if="showHead"
                             ref="head">
                            <slot name="header">
                                <div :class="[prefixCls + '-header-inner']">{{ title }}</div>
                            </slot>
                        </div>
                        <div :class="[prefixCls + '-body']">
                            <slot></slot>
                        </div>
                        <div :class="[prefixCls + '-footer']"
                             v-if="!footerHide">
                            <slot name="footer">
                                <i-button type="text"
                                          size="large"
                                          @click.native="cancel">{{ localeCancelText }}</i-button>
                                <i-button type="primary"
                                          size="large"
                                          :loading="buttonLoading"
                                          @click.native="ok">{{ localeOkText }}</i-button>
                            </slot>
                        </div>
                    </div>
                </div>
            </transition>
        </div>
    </div>
</template>

<script>
//TODO 添加属性移除出现显示的动画效果，以保证tab中使用的切换效果
import Drag from '@/common/drag';
import TransferDom from '@/directives/transfer-dom';
import { Modal } from 'iview';
export default {
	extends: Modal,
	props: {
		deep: {
			default: 0,
		},
		maskClosable: {
			type: Boolean,
			default: false,
		},
		hasMask: {
			default: true,
		},
		transferSelector: {
			default: true,
		},
	},
	directives: {
		TransferDom,
	},
	methods: {
		addScrollEffect() {
			this.checkScrollBar();
			this.setScrollBar();
			if (this.$el.__transferDomData && this.$el.__transferDomData.target === document.body) {
				document.body.classList.add('has-modal');
			}
			this.hasMask && (document.body.style.overflow = 'hidden');
		},
		removeScrollEffect() {
			document.body.style.overflow = '';
			if (
				document.body.querySelectorAll('.ivu-modal-wrap').length <=
				document.body.querySelectorAll('.ivu-modal-wrap.ivu-modal-hidden').length + 1
			) {
				document.body.classList.remove('has-modal');
			}
			this.resetScrollBar();
		},
	},
	mounted() {
		Drag(this.$refs.head, this.$refs.body);
	},
	computed: {
		//计算弹窗深度
		deepIndex() {
			return this.deep ? 'z-index:' + (1000 + parseInt(this.deep)) : '';
		},
		transferDom() {
			return this.transferSelector || true;
		},
	},
};
</script>

<style lang="less">
.has-modal {
	padding-right: 17px;
	overflow: hidden;
}
</style>
